<template>
  <div id="maincontentsection" class="mainContent">
    <ul v-if="PatientList.length">
      <li
        @click="trunToB($event)"
        :key="index"
        v-for="(item, index) in PatientList"
        :data-id="item.ID"
      >
        <div class="personal-details">
          <div
            class="collection"
            :data-id="item.ID"
            :data-tags="item.IsTag"
            @click="collection($event)"
          >
            <i :class="{'sign': item.IsTag <= 0,'util': item.IsTag > 0}"></i>
          </div>
          <div class="personal-content">
            <div class="sex">
              <img src="./../../../../static/images/man.png" alt="男" v-show="item.Gender_Text=='男'" />
              <img
                src="./../../../../static/images/woman.png"
                alt="女"
                v-show="item.Gender_Text=='女'"
              />
              <!-- <img :src="statusimage" > -->
              <div
                class="nursing"
                @click="routeLink($event)"
                :data-id="item.ID"
                v-show="item.NURSINGSHEET!=''"
                title="特护单"
              >
                <img src="./../../../../static/images/nursing.png" alt="Alternate Text" />
              </div>
              <div>
                <p class="bedId">{{item.BedName}}</p>
                <p class="Id">{{item.ID}}</p>
              </div>
            </div>

            <div class="message">
              <span class="userName">{{item.Name}}</span>
              <i class="line"></i>
              <span class="age">{{item.Age}}</span>岁
            </div>
            <div class="illness">
              <span>病情：</span>
              <span class="disease">{{item.Sickness_Text}}</span>
            </div>
            <!-- <div class="score">
            <span>评分：</span>
            <span class="num">{{item.Apache_Score}}</span>
            </div>-->
            <div class="ill-time">{{item.InIcuTime | formatDate}}</div>
            <div class="sign-icon">
              <span class="ill-te">{{item.NursingLevel_Text.substring(0,1)}}</span>
              <span class="ill-shu" v-show="item.OperationState >= 1">术</span>
              <span class="ill-fei" v-show="item.OperationState < 0">费</span>
              <span class="score">{{item.Apache_Score | filterScore}}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <confirm ref="alert" :message="'确认取消收藏吗？'" :sureBtn="CancelCollection"></confirm>
    <loading v-if="PatientList.length==0 && isShow"></loading>
    <noSearch v-if="PatientList.length==0  && !isShow"></noSearch>
  </div>
</template>
<script>
import { formatDate } from "@/components/common/date"; //引入时间转换JS
import {
  apiPatientList,
  apiNursingSheetOne,
  apiAddPatientTags,
  apiDeletePatientTags
} from "@/api/api"; // 导入我们的患者列表api接口
import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
import loading from "@/components/loading/loading"; //导入loading 组件
import noSearch from "@/components/search/noSearch"; //导入没有搜索结果组件
import confirm from "@/components/confirm/confirm";
import axios from "axios";
export default {
  name: "PatientList",
  data() {
    return {
      PatientList: [],
      TotalCount: 10,
      icuName: JSON.parse(sessionStorage.getItem("user")).Content, //登录用户的科室
      patientName: "", //患者名字
      isShow: true,
      patientId: "",
      src: "",
      sickness: "",
      isSearch: true,
      PatientID: "", //当前点击患者ID
      isTwo: false //标识当前是否查询病情（是否第二次请求）
    };
  },
  watch: {
    icuName: {
      handler(curVal, oldVal) {
        //监听登陆人的科室有没改变，如果改变就执行下面的方法
        //console.log(curVal)  //新值
        $("#maincontentsection").scrollTop(0);
        this.PatientList = [];
        this.isShow = true;
        this.getPatientList();
      }
    },
    patientName: {
      //监听搜索条件有没改变，如果改变就执行下面的方法
      handler(curVal, oldVal) {
        if (this.patientName == "") {
          this.PatientList = [];
          this.isShow = true;
          if (!this.isTwo) {
            this.getPatientList();
          }
        } else {
          this.isSearch = false;
          this.PatientList = [];
          this.getPatientList();
        }
      }
    }
  },
  created() {
    // console.log(this.$route.query.patientId)
    this.firstGetNursingSheetOne();
  },
  mounted() {
    // alert(localStorage.getItem("userMsg"))
    //this.test();
    this.$nextTick(() => {
      this.getPatientList1();
    });
    Bus.$on("Content", e => {
      this.icuName = e.trim();
      // 　　　　　console.log(`传来的数据是：${e}`)
    });
    Bus.$on("searchVal", e => {
      //console.log(e.trim() == '')
      if (e.trim() == "") {
        this.isSearch = true;
        this.PatientList = [];
        this.isShow = true;
        this.patientName = "";
        this.sickness = "";
        this.getPatientList2();
      } else {
        this.isSearch = false;
        this.patientName = e.trim();
      } //console.log(`传来的数据是：${e}`)
    });
  },
  methods: {
    getPatientList1() {
      this.sickness = "";
      this.patientName = "";
      apiPatientList({
        pageIndex: 1,
        pageSize: 40,
        userId: JSON.parse(sessionStorage.getItem("user")).ID,
        isInICU: true, //是否在科
        isTags: false, //收藏
        icuName: this.icuName, // 科室
        patientName: this.patientName, //床位加患者人名参数
        sickness: this.sickness //病情参数
      }).then(res => {
        if (res.Status == 1) {
          if (res.Data.length == 0) {
            this.PatientList = [];
            this.isShow = false;
            //console.log( this.PatientList)
            // 把获取到的总数传入公共媒介 js
            Bus.$emit("TotalCount", res.TotalCount);
          } else {
            this.isShow = true;
            // 把后台传入的数据赋值
            this.PatientList = res.Data;
            //console.log( this.PatientList)
            // 把获取到的总数传入公共媒介 js
            Bus.$emit("TotalCount", res.TotalCount);
          }
        } else if (res.Status == -1) {
          this.isShow = false;
          this.PatientList = [];
        }
      });
    },
    // 获取数据
    getPatientList() {
      //搜索床位和人名获取数据
      // // 调用患者列表api接口，并且提供了参数
      this.sickness = "";
      apiPatientList({
        pageIndex: 1,
        pageSize: 40,
        userId: JSON.parse(sessionStorage.getItem("user")).ID,
        isInICU: this.isSearch, //是否在科
        isTags: false, //收藏
        icuName: this.icuName, // 科室
        patientName: this.patientName, //床位加患者人名参数
        sickness: this.sickness //病情参数
      }).then(res => {
        if (res.Status == 1) {
          this.isTwo = false;
          if (res.Data.length == 0) {
            this.PatientList = [];
            this.isShow = false;
            //console.log( this.PatientList)
            // 把获取到的总数传入公共媒介 js
            Bus.$emit("TotalCount", res.TotalCount);
          } else {
            this.isShow = true;
            // 把后台传入的数据赋值
            this.PatientList = res.Data;
            //console.log( this.PatientList)
            // 把获取到的总数传入公共媒介 js
            Bus.$emit("TotalCount", res.TotalCount);
          }

          //  alert(res)
          //console.log( res.Data)
        } else if (res.Status == -1) {
          this.isTwo = true;
          this.sickness = this.patientName;
          this.patientName = "";
          this.isSearch = false;
          apiPatientList({
            pageIndex: 1,
            pageSize: 40,
            userId: JSON.parse(sessionStorage.getItem("user")).ID,
            isInICU: this.isSearch, //是否在科
            isTags: false, //收藏
            icuName: this.icuName, // 科室
            patientName: this.patientName, //床位加患者人名参数
            sickness: this.sickness //病情参数
          }).then(res => {
            if (res.Status == 1) {
              if (res.Data.length == 0) {
                this.PatientList = [];
                this.isShow = false;
                //console.log( this.PatientList)
                // 把获取到的总数传入公共媒介 js
                Bus.$emit("TotalCount", res.TotalCount);
              } else {
                this.isShow = true;
                // 把后台传入的数据赋值
                this.PatientList = res.Data;
                //console.log( this.PatientList)
                // 把获取到的总数传入公共媒介 js
                Bus.$emit("TotalCount", res.TotalCount);
              }
              //  alert(res)
              //console.log( res.Data)
            } else if (res.Status == -1) {
              this.isShow = false;
              this.PatientList = [];
            }
          });
        }
      });
    },
    getPatientList2() {
      //搜索病情获取数据
      apiPatientList({
        pageIndex: 1,
        pageSize: 40,
        userId: JSON.parse(sessionStorage.getItem("user")).ID,
        isInICU: this.isSearch, //是否在科
        isTags: false, //收藏
        icuName: this.icuName, // 科室
        patientName: this.patientName, //床位加患者人名参数
        sickness: this.sickness //病情参数
      }).then(res => {
        if (res.Status == 1) {
          if (res.Data.length == 0) {
            this.PatientList = [];
            this.isShow = false;
            //console.log( this.PatientList)
            // 把获取到的总数传入公共媒介 js
            Bus.$emit("TotalCount", res.TotalCount);
          } else {
            this.isShow = true;
            // 把后台传入的数据赋值
            this.PatientList = res.Data;
            //console.log( this.PatientList)
            // 把获取到的总数传入公共媒介 js
            Bus.$emit("TotalCount", res.TotalCount);
          }
        } else if (res.Status == -1) {
          this.isShow = false;
          this.PatientList = [];
        }
      });
    },
    // 首次加载指定patientId的患者详情
    firstGetNursingSheetOne() {
      console.log(this.$route.query.patientId);
      // 利用query只保存一次patientId
      // if(!this.$route.query.patientId) return;
      //   apiNursingSheetOne({
      //     patientIdIn: this.$route.query.patientId
      //   })
      //     .then(res => {
      //       if (res.Status == 1) {
      //         this.src = axios.defaults.baseURL.replace("api", "") + JSON.parse(res.Data)[0].MemoryAddress.replace("AppServerWeb", "");
      //         this.$router.push({
      //           path: '/nursingPdf',
      //           query: { http: this.src, state: 1, patientId: this.$route.query.patientId }
      //         })
      //       } else if (res.Status == -1) {
      //         this.$toast.center('该患者没有特护单');
      //       }
      //     })

      // trunToB(e) {
      //console.log(e.target)
      if (!this.$route.query.patientId) return;
      this.$store.commit("id", this.$route.query.patientId);
      this.$store.commit("slideinfo");
      this.$router.push({ path: "/basicInformation", query: { item: 1 } });
      // }
    },
    getNursingSheetOne() {
      apiNursingSheetOne({
        patientIdIn: this.patientId
      }).then(res => {
        if (res.Status == 1) {
          this.src =
            axios.defaults.baseURL.replace("api", "") +
            JSON.parse(res.Data)[0].MemoryAddress.replace("AppServerWeb", "");
          this.$router.push({
            path: "/nursingPdf",
            query: { http: this.src, state: 1, patientId: this.patientId }
          });
        } else if (res.Status == -1) {
          this.$toast.center("该患者没有特护单");
        }
      });
    },
    trunToB(e) {
      //console.log(e.target)
      this.$store.commit("id", e.currentTarget.getAttribute("data-id"));
      this.$store.commit("slideinfo");
      this.$router.push({ path: "/basicInformation", query: { item: 1 } });
    },
    routeLink(e) {
      e.stopPropagation(); //阻止事件冒泡
      this.patientId = e.currentTarget.getAttribute("data-id");
      this.getNursingSheetOne();
    },
    collection(e) {
      e.stopPropagation(); //阻止事件冒泡
      let tag = e.currentTarget.getAttribute("data-tags");
      this.PatientID = e.currentTarget.getAttribute("data-id");
      if (tag <= 0) {
        //console.log('添加');
        let json = {};
        json.Tags = 1;
        json.PatientNo = this.PatientID;
        json.UserId = JSON.parse(sessionStorage.getItem("user")).ID;
        //console.log(json);
        apiAddPatientTags({
          tagsJson: JSON.stringify(json)
        }).then(res => {
          if (res.ResultCode == 1) {
            //console.log(res)
            this.getPatientList2();
            this.$toast.center("收藏成功");
          } else {
            this.$toast.center(res.Message);
          }
        });
      } else {
        //console.log('删除');
        this.$refs.alert.show();
      }
    },
    CancelCollection() {
      //点击取消收藏弹出框确定按钮事件
      apiDeletePatientTags({
        UserID: JSON.parse(sessionStorage.getItem("user")).ID,
        PatientID: this.PatientID
      }).then(res => {
        if (res.ResultCode == 1) {
          //console.log(res)
          this.getPatientList2();
          this.$toast.center("取消收藏成功");
        } else {
          this.$toast.center(res.Message);
        }
      });
    }
  },

  filters: {
    formatDate(time) {
      var date = new Date(parseInt(time.substring(6, 19)));
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
    filterScore(num) {
      if (!num) return "";
      return num + "分";
    }
  },
  components: {
    loading,
    noSearch,
    confirm
  }
};
</script>
<style scoped>
#maincontentsection {
  padding-bottom: 20px;
  overflow-y: auto;
  width: 100%;
  padding: 15px;
}

#maincontentsection > ul {
  display: flex;
  flex-flow: wrap;
}

#maincontentsection > ul > li {
  margin-top: 30px;
  margin-left: 30px;
}

.personal-details {
  position: relative;
  width: 200px;
  height: 235px;
  display: flex;
  align-items: center;
  box-shadow: 1px -2px 15px #ccc;
  font-size: 16px;
  border-radius: 8px;
  padding: 10px 0;
}

.personal-content {
  width: 100%;
}

.line {
  display: inline-block;
  width: 1px;
  height: 18px;
  background-color: #ccc;
  vertical-align: middle;
}

.ill-time {
  font-size: 14px;
  color: #666;
}

.personal-details .sex > img {
  display: inline-block;
  width: 50px;
  height: 50px;
  margin-right: 20px;
}

.personal-details .bedId {
  width: 100%;
  text-align: center;
  font-size: 16px;
  margin-top: 5px;
  color: #000;
}

.personal-details .Id {
  width: 100%;
  text-align: center;
  font-size: 16px;
  margin-top: 5px;
  color: #666;
}

.nursing {
  position: absolute;
  height: 60px;
  width: 55px;
  text-align: right;
  top: 6px;
  top: 6px;
  left: 18px;
  cursor: pointer;
}
.collection {
  position: absolute;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 5px;
  top: 5px;
  z-index: 9999;
  cursor: pointer;
}

.collection i,
.collection i.sign {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("../../../../static/images/sign02.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.collection i.util {
  background-image: url("../../../../static/images/util_10.png");
}
.sex {
  display: flex;
  align-items: center;
  padding: 10px 0 15px 20px;
  position: relative;
  text-align: left;
}

.message,
.illness,
.ill-time,
.sign-icon {
  padding-left: 20px;
  padding-right: 15px;
  margin-top: 10px;
}

.score {
  color: #11a7f3;
  font-size: 16px;
}

.message .userName {
  margin-right: 15px;
}

.message .age {
  margin-left: 15px;
}

.sign-icon .ill-te {
  color: #de5f59;
}

.sign-icon .ill-shu {
  color: #11a7f3;
}

.sign-icon .ill-fei {
  color: #f5965d;
}

.sign-icon span {
  margin-left: 6px;
}

.sign-icon span:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 21px;
  background-color: #ccc;
  vertical-align: top;
  margin-left: 10px;
}

.sign-icon span.score:after {
  width: 0;
}

.sign-icon span:first-child {
  margin-left: 0;
}

@media (max-width: 768px) {
  #maincontentsection > ul > li {
    margin-top: 15px;
    margin-left: 15px;
  }
}
@media (max-width: 425px) {
  #maincontentsection {
  padding: 0;
}
#maincontentsection > ul > li {
  margin-top: 0;
  margin-left: 0;
  margin:15px auto;
}
.personal-details {
  width: 240px;
  
}
}
</style>
